<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>购物车页面</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="scss/cart.scss">
</head>
<body class="cart">
<!--顶部导航-->
<div class="header clearfix">
    <ul class="message-l">
        <a href="#">亲，请登录</a>
        <a href="#">免费注册</a>
    </ul>
    <ul class="message-r">
        <div><a href="index.html">商城首页</a></div>
        <div><img src="img/cart/top_1.png"/><a href="information.html">个人中心</a></div>
        <div><img src="img/cart/top_2.png"/><a href="cart.html">购物车<strong>0</strong></a></div>
        <div><img src="img/cart/top_3.png"/><a href="collection.html">收藏夹</a></div>
    </ul>
</div>

<!--搜索框-->
<div class="search-box clearfix">
    <div class="logo"><img src="img/cart/logo.png"/></div>
    <div class="search-tool">
        <form>
            <input id="text" type="text" placeholder="搜索">
            <a href="search.html"><input id="sub" value="搜索" type="button"></a>
        </form>
    </div>
</div>

<!--购物车 -->
<div class="cart-main">
    <div class="cart-top clearfix">
         <div>商品信息</div>
         <div>单价</div>
         <div>数量</div>
         <div>金额</div>
         <div>操作</div>
    </div>
    <div class="cart-list">
        <div class="cart-discount">
            <span>已享优惠:省￥19.50</span>
            <a href="#">第二支半价，第三支免费 >></a>
        </div>
        <ul class="cart-shop">
            <li class="cart-checkbox">
                <input type="checkbox"/>
            </li>
            <li class="cart-img">
                <a href="#"><img src="img/cart/kouhong.jpg"/></a>
            </li>
            <li class="cart-name">
                <a title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" href="index-shop.html">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</a>
            </li>
            <li class="cart-option">
                <span>颜色：12#川南玛瑙</span>
                <span>包装：裸装</span>
                <span class="cart-alter">修改</span>
            </li>
            <li class="cart-price">
                <p>78.00</p>
                <p>39.00</p>
            </li>
            <li class="cart-number">
                <input type="button" value="-" />
                <input type="text" value="3" />
                <input type="button" value="+" />
            </li>
            <li class="cart-price1">
                <p>117.00</p>
            </li>
            <li class="cart-action">
                <a href="#">移入收藏夹</a>
                <a href="#">删除</a>
            </li>
        </ul>
        <ul class="cart-shop">
            <li class="cart-checkbox">
                <input type="checkbox" />
            </li>
            <li class="cart-img">
                <a href="#"><img src="img/cart/kouhong.jpg"/></a>
            </li>
            <li class="cart-name">
                <a title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" href="index-shop.html">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</a>
            </li>
            <li class="cart-option">
                <span>颜色：12#川南玛瑙</span>
                <span>包装：裸装</span>
                <span class="cart-alter">修改</span>
            </li>
            <li class="cart-price">
                <p>78.00</p>
                <p>39.00</p>
            </li>
            <li class="cart-number">
                <input type="button" value="-" />
                <input type="text" value="3"/>
                <input type="button" value="+" />
            </li>
            <li class="cart-price1">
                <p>117.00</p>
            </li>
            <li class="cart-action">
                <a href="#">移入收藏夹</a>
                <a href="#">删除</a>
            </li>
        </ul>
        <div class="cart-discount">
            <span>已享优惠:省￥19.50</span>
            <a href="#">第二支半价，第三支免费 >></a>
        </div>
        <ul class="cart-shop">
            <li class="cart-checkbox">
                <input type="checkbox">
            </li>
            <li class="cart-img">
                <a href="#"><img src="img/cart/kouhong.jpg"/></a>
            </li>
            <li class="cart-name">
                <a title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色" href="index-shop.html">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</a>
            </li>
            <li class="cart-option">
                <span>颜色：10#蜜橘色</span>
                <span>包装：两支手袋装（送彩带）</span>
                <span class="cart-alter">修改</span>
            </li>
            <li class="cart-price">
                <p>78.00</p>
                <p>39.00</p>
            </li>
            <li class="cart-number">
                <input  type="button" value="-" />
                <input type="text" value="3"/>
                <input type="button" value="+" />
            </li>
            <li class="cart-price1">
                <p>117.00</p>
            </li>
            <li class="cart-action">
                <a href="#">移入收藏夹</a>
                <a href="#">删除</a>
            </li>
        </ul>
    </div>
    <div class="cart-bottom">
        <div class="cart-box1">
            <input id="cart-all" type="checkbox"/>
            <span>全选</span>
            <a href="#">删除</a>
            <a href="#">移入收藏夹</a>
        </div>
        <div class="cart-box2">
            <span>已选商品</span>
            <em>0</em>
            <span>件</span>
        </div>
        <div class="cart-box3">
            <span>合计:</span>
            <strong>¥<em>0.00</em></strong>
        </div>
        <div class="cart-box4"><a href="count.html">结&nbsp;算</a></div>
    </div>
    <div class="cart-null">
        <div>
            <p>您的购物车还是空的</p>
            <p>赶紧行动吧！</p>
            <input type="button" value="马上去购物 >>" />
        </div>
        <div>
            <img src="img/search/null.jpg"/>
        </div>
    </div>
</div>

<!--弹出框-->
<div class="cart-popover clearfix">
    <div>
        <li>
            <div>颜色：</div>
            <ul>
                <li class="sku-line"><span>12#川南玛瑙</span><i></i></li>
                <li class="sku-line"><span>10#蜜橘色+17#樱花粉</span><i></i></li>
            </ul>
        </li>
        <li>
            <div>包装：</div>
            <ul>
                <li class="sku-line"><span>裸装</span><i></i></li>
                <li class="sku-line"><span>两支手袋装（送彩带）</span><i></i></li>
            </ul>
        </li>
        <li>
            <div>数量</div>
            <div class="cart-number">
                <input type="button" value="-" />
                <input type="text" value="1" />
                <input type="button" value="+" />
                <span>库存<span>1000</span>件</span>
            </div>
        </li>
        <div>
            <div class="cart-determine">确认</div>
            <div class="cart-abolish">取消</div>
        </div>
    </div>
    <div>
        <div>
            <img src="img/cart/kouhong1.jpg" />
        </div>
        <div>
            <span>¥39.00</span>
            <span>库存<span>1000</span>件</span>
        </div>
    </div>
</div>

<!--底栏-->
<div class="footer">
    <div class="footer-top">
        <p>
            <a href="index.html">Weshop</a><span>|</span>
            <a href="index.html">商城首页</a><span>|</span>
            <a href="#">支付宝</a><span>|</span>
            <a href="#">物流</a>
        </p>
    </div>
    <div class="footer-bottom">
        <p>
            <a href="#">关于我们</a>
            <a href="#">合作伙伴</a>
            <a href="#">联系我们</a>
            <a href="#">网站地图</a>
        </p>
    </div>
</div>
<script type="text/javascript" src="js/cart.js"></script>
</body>
</html>